<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="<?php echo IUrl::creatUrl("")."views/".$this->theme."/skin/".$this->skin."/css/admin.css";?>" />
<script charset="UTF-8" src="/runtime/systemjs/jquery-1.4.4.min.js"></script>
<script charset="UTF-8" src="/runtime/systemjs/artdialog/artDialog.min.js"></script>
<script charset="UTF-8" src="/runtime/systemjs/form.js"></script>
<link rel="stylesheet" type="text/css" href="/runtime/systemjs/autovalidate/style.css"/><script charset="UTF-8" src="/runtime/systemjs/autovalidate/validate.js"></script>
</head>
<body>
<div class="content">
<form action='<?php echo IUrl::creatUrl("/goods/spec_update/block");?>' method='post' name='spec'>
	<table class="form_table" cellpadding="0" cellspacing="0" style="width:90%">
		<col width="100px" />
		<col  />
		<input type="hidden" name="id" value="" />
		<tr>
			<th>规格名称：</th><td><input class="normal" name="name" value="" type="text" pattern="required" alt="名字不能为空" /><label>* 规格名称（必填）</label></td>
		</tr>
		<tr>
			<th>显示类型：</th><td><label class="attr"><input name="type" type="radio" value="1" checked=checked /> 文字</label><label class="attr"><input name="type" type="radio" value="2" /> 图片</label></td>
		</tr>
		<tr>
			<th>显示备注：</th><td><input class="normal" type="text" name="note" value="" /></td>
		</tr>
		<tr>
			<th></th><td><button type="button" class="btn" id="specAddButton"><span class="add">添 加</span></button></td>
		</tr>
		<tr>
			<th></th>
			<td>
				<table class='border_table' cellpadding="0" cellspacing="0" width='70%'>
					<thead>
						<tr>
							<th><?php if($type==2){?>规格图片<?php }else{?>规格值<?php }?></th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id='spec_box'>
						<?php $specValue=$value?unserialize($value):array()?>
						<?php foreach($specValue as $key => $item){?>
							<tr class='td_c'>
								<td>
									<?php if($type==1){?><input type="text" class="normal" name="value[]" value="<?php echo isset($item)?$item:"";?>" pattern="required" /><?php }?>
									<?php if($type==2){?><div class="imgbox"><img class="spec_pic" src='<?php echo isset($item)?$item:"";?>' width='50px' height='50px' /></div><input type="hidden" name="value[]" value="<?php echo isset($item)?$item:"";?>" /><button type="button" class="btn"><span>选择图片</span></button><?php }?>
								</td>
								<td>
									<img class="operator" src="<?php echo IUrl::creatUrl("")."views/".$this->theme."/skin/".$this->skin."/images/admin/icon_asc.gif";?>" alt="向上" /><img class="operator" src="<?php echo IUrl::creatUrl("")."views/".$this->theme."/skin/".$this->skin."/images/admin/icon_desc.gif";?>" alt="向下" /><img class="operator" src="<?php echo IUrl::creatUrl("")."views/".$this->theme."/skin/".$this->skin."/images/admin/icon_del.gif";?>" alt="删除" />
								</td>
							</tr>
						<?php }?>
					</tbody>
				</table>
			</td>
		</tr>
		<tr>
			<th></th><td><button class="submit" type='submit'><span>保 存</span></button></td>
		</tr>
	</table>
</form>
</div>
</body>
<script type='text/javascript'>
	var formObj = new Form('spec');
	formObj.init({
		'id':'<?php echo isset($id)?$id:"";?>',
		'name':'<?php echo isset($name)?$name:"";?>',
		'type':'<?php echo isset($type)?$type:"";?>',
		'note':'<?php echo isset($note)?$note:"";?>'
	});

	//规格图片上传回调函数
	function updatePic(indexValue,srcValue)
	{
		$('#spec_box tr:eq('+indexValue+') td:eq(0) .imgbox').html('<img src="<?php echo IUrl::creatUrl("")."";?>'+srcValue+'" class="spec_pic" width="50px" height="50px"  />');
		$('#spec_box tr:eq('+indexValue+') td:eq(0) :hidden').val(srcValue);
		parent.art.dialog({id:'uploadIframe'}).close();
	}

	//规格图片html
	function getPicHtml(dataValue)
	{
		var srcHtml = '';
		if(dataValue)
			var srcHtml = '<img src="'+dataValue+'" class="spec_pic" width="50px" height="50px" />';

		return '<div class="imgbox">'+srcHtml+'</div><input type="hidden" name="value[]" value="'+dataValue+'" /><button type="button" class="btn"><span>选择图片</span></button>'
	}

	//规格值html
	function getValHtml(dataValue)
	{
		if(dataValue == undefined)
			dataValue = '';
		return '<input class="small" type="text" name="value[]" value="'+dataValue+'" pattern="required" />';
	}

	//上传按钮html
	function getUploadButtonHtml(obj)
	{
		var specIndex = obj.parent().parent().index();
		var tempUrl = "<?php echo IUrl::creatUrl("/block/pic/specIndex/@specIndex@");?>";
		tempUrl     = tempUrl.replace('@specIndex@',specIndex);
		art.dialog.open(tempUrl,{id:"uploadIframe",width:500,height:350,title:'选择图片上传的方式：'});
	}

	//根据显示类型返回格式
	function getTr(indexValue)
	{
		var typeValue = $(':radio:checked').val();

		//规格图片格式
		var specInputHtml = getValHtml();
		if(typeValue==2)
			var specInputHtml = getPicHtml();

		//数据
		var specRow = '<tr class="td_c"><td>'+specInputHtml+'</td>'
		+'<td><img class="operator" src="<?php echo IUrl::creatUrl("")."views/".$this->theme."/skin/".$this->skin."/images/admin/icon_asc.gif";?>" alt="向上" />'
		+'<img class="operator" src="<?php echo IUrl::creatUrl("")."views/".$this->theme."/skin/".$this->skin."/images/admin/icon_desc.gif";?>" alt="向下" />'
		+'<img class="operator" src="<?php echo IUrl::creatUrl("")."views/".$this->theme."/skin/".$this->skin."/images/admin/icon_del.gif";?>" alt="删除" />'
		+'</td></tr>';

		return specRow;
	}

	//展示规格类型(点击绑定)
	$(':radio').click(
		function()
		{
			//获取规格类型
			var typeValue = $(this).val();
			if(typeValue==1)
				$('.border_table thead th:eq(0)').text('规格值');
			else
				$('.border_table thead th:eq(0)').text('规格图片');

			$('#spec_box tr').each(
				function(i)
				{
					//获取文字数据并进行缓存
					var specVal = $('#spec_box tr:eq('+i+') input:text').val();
					if(specVal != $('#spec_box tr:eq('+i+')').data('specVal'))
					{
						$('#spec_box tr:eq('+i+')').data('specVal',specVal);
					}

					//获取图片数据并进行缓存
					var specPic = $('#spec_box tr:eq('+i+') input:hidden').val();
					if(specPic != $('#spec_box tr:eq('+i+')').data('specPic'))
					{
						$('#spec_box tr:eq('+i+')').data('specPic',specPic);
					}

					//文字方式切换
					if(typeValue==1)
					{
						var specVal = $('#spec_box tr:eq('+i+')').data('specVal');
						$(this).children('td:first').html(getValHtml(specVal));
					}

					//图片方式切换
					else
					{
						var specPic = $('#spec_box tr:eq('+i+')').data('specPic');
						$(this).children('td:first').html(getPicHtml(specPic));
					}
					//重新绑定按钮
					initButton(i);
				}
			);
		}
	)

	//添加规格按钮(点击绑定)
	$('#specAddButton').click(
		function()
		{
			var specSize = $('#spec_box tr').size();
			var specRow = getTr(specSize);
			$('#spec_box').append(specRow);
			initButton(specSize);
		}
	)

	//按钮(点击绑定)
	function initButton(indexValue)
	{
		//上传图片按钮
		$('#spec_box tr:eq('+indexValue+') td button').click(
			function()
			{
				getUploadButtonHtml($(this));
			}
		);

		//功能操作按钮
		$('#spec_box tr:eq('+indexValue+') .operator').each(
			function(i)
			{
				switch(i)
				{
					//向上排序
					case 0:
					$(this).click(
						function()
						{
							var insertIndex = $(this).parent().parent().prev().index();
							if(insertIndex >= 0)
							{
								$('#spec_box tr:eq('+insertIndex+')').before($(this).parent().parent());
							}
						}
					)
					break;

					//向上排序
					case 1:
					$(this).click(
						function()
						{
							var insertIndex = $(this).parent().parent().next().index();
							$('#spec_box tr:eq('+insertIndex+')').after($(this).parent().parent());
						}
					)
					break;

					//删除排序
					case 2:
					$(this).click(
						function()
						{
							if(confirm('确定要删除么？'))
								$(this).parent().parent().remove();
						}
					)
					break;
				}
			}
		)
	}
</script>
</html>